/**
 * name:LazyImage,
 * version:1.0.0,
 * author:牧鱼¹
 * compatibility: >=IE9
 * time:2020/10/30
 * @param options 自定义参数
 *  + context 上下文
 *  + attr img自定义属性
 *  + threshold 显示多少时开始加载 0-1
 *  + speed 动画时间
 *  + callback 回调函数
 */
(function () {
    function LazyImage(options) {
        // 合并自定义参数
        var options = options || {};
        var defaults = {
            context: "html",
            attr: "data-lazy",
            threshold: 0,
            speed: 300,
            callback: null,
        };
        for (key in options) {
            defaults[key] = options[key];
        }

        // 返回init的实例，使LazyImage普通调用也能生成实例
        return new LazyImage.prototype.init(defaults);
    }

    LazyImage.prototype = {
        version: "1.0.0", // 版本信息
        constructor: LazyImage, // 构造器

        // 初始化
        init: function init(config) {
            this.config = config;
            this.getWindowSize();
            this.ob.call(this);
            window.addEventListener("resize", this.getWindowSize.bind(this), false);
            window.addEventListener(
                "scroll",
                this.throttle.call(this, this.ob.bind(this)),
                false
            );
        },

        // 获取窗口尺寸
        getWindowSize: function windowSize() {
            this.windowSize = {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight,
            };
        },

        // 监听方法
        ob: function ob() {
            var that = this,
                context = this.config.context,
                attr = this.config.attr,
                threshold = this.config.threshold,
                speed = this.config.speed,
                callback = this.config.callback,
                imgs = document.querySelectorAll(context + " img[" + attr + "]");
            Array.prototype.forEach.call(imgs, function (item) {
                var rect = item.parentNode.getBoundingClientRect();
                if (rect.top + rect.height * threshold < that.windowSize.height) {
                    item.src = item.getAttribute(attr);
                    item.onload = function () {
                        item.removeAttribute(attr);
                        item.style.transition = "opacity " + speed / 1000 + "s";
                        item.style.opacity = 1;
                        if (callback) {
                            callback.call(this);
                        }
                    }
                }
            });

        },

        // 节流方法
        throttle: function throttle(callback, wait) {
            var that = this,
                wait = typeof wait === "number" ? wait : 300,
                timer = null,
                lastTime = 0;
            return function anonymous(params) {
                var now = new Date(),
                    remaining = wait - (now - lastTime);
                if (remaining <= 0) {
                    clearTimeout(timer);
                    timer = null;
                    lastTime = now;
                    callback.call(that, params);
                } else if (!timer) {
                    timer = setTimeout(function () {
                        clearTimeout(timer);
                        timer = null;
                        lastTime = now;
                        callback.call(that, params);
                    }, remaining);
                }
            };
        },
    };

    // 将init原型指向LazyImage原型，使得创建的init实例即为LazyImage的实例
    LazyImage.prototype.init.prototype = LazyImage.prototype;

    // 只能在客户端运行
    if (typeof window != "undefined") {
        // 防冲突
        if (window.LazyImage) {
            window._LazyImage = window.LazyImage;
        }
        // 挂载到全局
        window.LazyImage = LazyImage;
    }

    // 导出
    if (typeof module === "object" && typeof module.export === "object") {
        module.export = LazyImage;
    }
})();